<template>
	<view>
		<view class="x-modal">
			<view class="x-m-title">
				<text>请在框内进行签名</text>
				<view class="xm-t-clear" @click="onClear">
					<text>清除</text>
				</view>
				<view @click="onSaveClick">
					<text class="button" type="success">保存</text>
				</view>
			</view>
			<view class="x-m-con">
				<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"
					@touchend="touchend"></canvas>
			</view>
			<!-- <image :src="baseurl" mode="" v-if="baseurl" /> -->
		</view>
	</view>
</template>

<script>
	import {
		registerParamsEvent
	} from "../../common/js/util";
	import {
		getLocal
	} from "../../common/localTools"; // gps 定位
	import {
		upload,
		requestFile
	} from "../../common/js/request"; // upload 文件上传

	export default {
		data() {
			return {
				ctx: "", //绘图图像
				points: [], //路径点集合
				signature: "",
				baseurl: "",
				disabled: false,
				form: {
					purpose: "",
					imgurl: "",
					index: "",
					id:""
				}
			};
		},
		mounted() {
			this.init();
			this.autograph();
		},
		methods: {
			init() {

                console.log('signatureArgsInit 1');
				registerParamsEvent(({
					purpose, imgurl, disabled,index
				}) => {
				
					console.log('signatureArgsInit 3');
					// parent 参数初始化
					this.form.purpose = purpose;
					this.form.imgurl = imgurl;
					this.form.index = index;
					this.baseurl = imgurl;
					this.disabled = disabled;
					
				}, "itemCallback");
				
				console.log('signatureArgsInit 2');
				uni.$emit("signatureArgsInit", "itemCallback");
			},

			onSignatureCompleted(attach) {
                console.log('signCallback ');
				this.form.id = attach.id;
				this.form.imgurl = attach.url;
                uni.$emit("signatureCallback", this.form);
				uni.navigateBack({
					delta: 1,
					fail(err) {
						console.log(err, '----------')
					}
				});

			},
			onSaveClick() {
				
				var ref = this;
				setTimeout(function() {
					uni.canvasToTempFilePath({
						canvasId: "mycanvas",
						success: (res) => {
                            ref.onSignatureCompleted({ url: res.tempFilePath,id:2});
							return;

							console.log('signSaveTmpFile ');
                            var ImageData = res.tempFilePath;
	
	                        console.log('signUploading ');
							// #ifdef H5 
							///////////////////////// H5
							////  [ "data:image/png;base64,"]
						
							
							//ImageData = ImageData.split(',')[1];
							//requestFile({
							//	url: '/admin-api/infra/oss/uploadBase64',
							//	method: 'post',
							//	data: {
							//		"ImageData": ImageData,
							//	}
							//}).then(data => {
							//	console.log('signUploaded ');
							//	ref.onSignatureCompleted(data);
							//});
							// #endif

							// #ifdef  MP-WEIXIN
							/////////////////////////// MP-WX
							upload(
								ImageData, ref.paramsData
							).then(data => {
								console.log('signUploaded ');
								ref.onSignatureCompleted(data);
							});
							// #endif
						}
					});
				});
			},
			cancel() { //关闭并清空画布
				this.onClear();
			},
			autograph() {
				//创建并显示签名画布
				//创建绘图对象
				this.ctx = uni.createCanvasContext("mycanvas", this);
				//设置画笔样式
				this.ctx.lineWidth = 4;
				this.ctx.lineCap = "round";
				this.ctx.lineJoin = "round";
			},
			//触摸开始，获取到起点
			touchstart(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY,
				};
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},
			//触摸移动，获取到路径点
			touchmove(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY,
				};
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
			},
			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend() {
				this.points = [];

				// // 预览
				// var ref = this;
				// uni.canvasToTempFilePath({
				// 	canvasId: "mycanvas",
				// 	success: (res) => {
				// 		ref.baseurl = res.tempFilePath;
				// 	}
				// })

			},
			draw() {
				let point1 = this.points[0];
				let point2 = this.points[1];
				this.points.shift();
				this.ctx.moveTo(point1.X, point1.Y);
				this.ctx.lineTo(point2.X, point2.Y);
				this.ctx.stroke();
				this.ctx.draw(true);
			},
			//清空画布
			onClear() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.ctx.clearRect(0, 0, canvasw, canvash);
						that.ctx.draw(true);
					},
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	@mixin playcenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.x-modal {
		width: 100%;
		// position: fixed;
		// top: 0%;

		.x-m-title {
			width: 100%;
			height: 90rpx;
			padding: 0 38rpx 0 31rpx;
			box-sizing: border-box;
			font-size: 29rpx;
			color: #333333;
			border-bottom: 1px dashed #999;
			@include playcenter;
			justify-content: space-between;

			.xm-t-clear {
				font-size: 25rpx;
				color: #341db7;
				@include playcenter;

				>image {
					width: 28rpx;
					height: 28rpx;
					display: block;
					margin-right: 8rpx;
				}
			}
		}

		.x-m-con {
			width: 100%;
			padding: 0 31rpx 18rpx;
			margin-top: 5rpx;
			box-sizing: border-box;
			background: #ffffff;
			height: 50vh;
		}

		.button {
			background: #ffffff;
			height: 50vh;
			color: #000000;
		}

		.mycanvas {
			width: 100%;
			height: 50vh;
		}
	}
</style>
